<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是今天的文件
    <div id="root">

    </div>
    <script>
        const app={
            type:'div',
            props:{
                className:'box',
                children:[
                    {
                        type:'p',
                        props:{
                            className:'p_l',
                            children:['hi,my,is,a,p']
                        }
                    },
                    {
                        type:'span',
                        props:{
                            className:'p_l',
                            children:['hi,my,is,a,span']
                        }
                    }
                ]
            }
        }
        

        const render=(app,root)=>{
            const creatElement=(app,root)=>{
             //定义一个占位符
             let cur = null;
             if(typeof app == 'string'){
                cur = window.document.createTextNode(app)
             }else{
                console.log(app);
                let {type,props} =app;
                cur = window.document.createElement(type);
                console.log(Object.keys(props))
                Object.keys(props).map((item,index)=>{
                    switch (item) {
                            case "className":
                                cur.setAttribute('class',props[item])
                                break;
                        
                            case "children":
                                if (Array.isArray(props.children)) {
                                    props.children.map(val=>{
                                        creatElement(val,cur)
                                    })
                                }
                                break;
                        }
                })
             }
             root.append(cur)   
            }
            creatElement(app,root)
        }
        render(app,root)
        let obj = {
            name:"张三",
            age:18
        }
        obj.name
        obj.age
    </script>
</body>
</html>